<template>
  <div class="container">
    <div class="container-content">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form
            :inline="true"
            label-width="80px"
            :model="tableOptions.queryForm"
          >
            <el-form-item label="菜单名称">
              <el-input
                v-model="tableOptions.queryForm.menuName"
                placeholder="请输入菜单名称"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="warning"
                icon="refresh-left"
                @click="handleResetQuery"
              >
                重置
              </el-button>
              <el-button type="primary" icon="Search" @click="queryTableData">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-top-panel>
        <vab-query-form-left-panel :span="24">
          <el-button
            v-auth="['shortcut/xz']"
            type="primary"
            icon="circle-plus"
            @click="handleAdd"
          >
            添加
          </el-button>
          <el-button
            v-auth="['shortcut/sc']"
            type="danger"
            icon="remove"
            @click="handleDelete"
          >
            批量删除
          </el-button>
        </vab-query-form-left-panel>
      </vab-query-form>

      <el-table
        ref="tableRef"
        v-loading="tableOptions.loading"
        border
        stripe
        :data="tableOptions.dataList"
        :height="tableOptions.height"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
          width="50"
        />
        <el-table-column label="序号" type="index" width="55">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户名" prop="userName" />
        <el-table-column
          key="menuId"
          align="center"
          label="菜单名称"
          prop="menuName"
          sortable
        />
      </el-table>
      <el-pagination
        background
        :current-page="tableOptions.pagination.current"
        :layout="tableOptions.pagination.layout"
        :page-size="tableOptions.pagination.size"
        :total="tableOptions.pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <MenuSelector
        ref="menuPickerRef"
        :disabled-keys="state.disabledKeys"
        :multiple="true"
        width="20%"
        @change="handleConfirmEdit"
      />
    </div>
  </div>
</template>
<script setup name="ShortCut">
import { useMessage, useMessageBox } from "@/hooks/message";
import { useUserStore } from "@/store/modules/user";
import { isArray } from "@/utils/validate";
import {
  queryShortcutTable,
  deleteShortcut,
  addShortcut
} from "@/api/admin/system/usershortcut/";
import MenuSelector from "@/components/menuTreePicker.vue";
import { useTable } from "@/hooks/table";

const userStore = useUserStore();

const tableRef = ref(null);

const menuPickerRef = ref(null);

const state = reactive({
  disabledKeys: []
});

const initDisableKey = dataList => {
  console.log(dataList);
  if (dataList && dataList.length > 0) {
    const ids = dataList.map(item => item.menuId).join(",");
    state.disabledKeys = (ids || "").split(",");
  }
};

const tableOptions = reactive({
  queryForm: {
    menuName: "",
    userId: userStore.getUserid
  },
  queryFunction: queryShortcutTable,
  descs: ["create_time"],
  onLoaded: initDisableKey
});

const {
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSizeChange,
  handleCurrentChange,
  handleSortChange
} = useTable(tableOptions, tableRef);

const handleAdd = () => {
  menuPickerRef.value.show({ menuType: "0,1" });
};

const handleDelete = row => {
  if (row && row.id) {
    useMessageBox()
      .confirm("删除的快捷菜单将无法恢复，是否继续")
      .then(async () => {
        const { msg } = await deleteShortcut(row.id);
        useMessage().success(msg);
        queryTableData();
      });
  } else {
    if (tableOptions.dataSelections.length > 0) {
      const ids = tableOptions.dataSelections.map(item => item.id).join();
      useMessageBox()
        .confirm("删除的快捷菜单将无法恢复，是否继续")
        .then(async () => {
          const { msg } = await deleteShortcut(ids);
          useMessage().success(msg);
          queryTableData();
        });
    } else {
      useMessage().error("未选中任何行");
    }
  }
};

const handleConfirmEdit = async nodes => {
  const { getUserid: userid } = storeToRefs(userStore);
  let ids;
  if (isArray(nodes)) {
    ids = nodes.map(item => item.id).join(",");
  } else {
    ids = nodes.id;
  }
  const params = {};
  params.menuId = ids;
  params.userId = userid.value;
  const { code, msg } = await addShortcut(params);
  if (code && code === 200) {
    useMessage().success(msg);
    queryTableData();
  } else {
    useMessage().error(msg);
  }
};

onMounted(() => {
  queryTableData();
});
</script>
<style lang="scss" scoped></style>
